<template>
  <div class="search">
    <Row>
      <Col>
        <Card>
          <!-- <Tabs value="MESSAGE" @on-click="paneChange"> -->

          <Row class="operation" style="margin-top: 20px"> </Row>
          <Table
            :loading="loading"
            border
            class="mr_10"
            :columns="noticeColumns"
            :data="noticeData"
          >
            <template slot="iconSlot" slot-scope="{ row }">
              <div style="margin: 5px 0px; height: 80px; display: flex">
                <div style="">
                  <img
                    v-if="row.url != null"
                    :src="row.url"
                    style="height: 60px; margin-top: 1px; width: 60px"
                  />
                </div>
              </div>
            </template>
          </Table>
        </Card>
      </Col>
    </Row>

    <!-- 编辑弹框 -->
    <Modal :title="messageModalTitle" v-model="messageModalVisible">
      <Form
        ref="messageSendForm"
        :model="messageSendForm"
        :label-width="100"
        :rules="messageFormValidate"
      >
        <FormItem label="名称" prop="name">
          <Input
            v-model="messageSendForm.name"
            :rows="4"
            type="textarea"
            maxlength="200"
            style="max-height: 60vh; overflow: auto; width: 70%"
          />
        </FormItem>
        <FormItem label="图标">
          <Upload :action="uploadFileUrl" :headers="accessToken" :on-success="handleSuccess" :show-upload-list="false">
            <Button icon="ios-cloud-upload-outline">图标</Button>
            <img class="iconImg" :src="messageSendForm.url" alt="">
          </Upload>
        </FormItem>
        <FormItem label="状态">
          <RadioGroup
            type="button"
            button-style="solid"
            v-model="messageSendForm.status"
            @on-change="selectObject"
          >
            <Radio label="0">开启</Radio>
            <Radio label="1">关闭</Radio>
          </RadioGroup>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="messageModalVisible = false">取消</Button>
        <Button
          type="primary"
          :loading="submitLoading"
          @click="sendMessageSubmit"
          >发送
        </Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import * as API_Setting from "@/api/setting.js";
import userList from "@/views/member/list/index";
import { regular } from "@/utils";
import { uploadFile } from "@/api/index";
export default {
  name: "homeModularManager",
  components: {
    userList,
  },
  data() {
    return {
      accessToken: {}, // 验证token
      uploadFileUrl: uploadFile, // 上传地址
      loading: true, // 表单加载状态
      messageModalVisible: false, // 发送站内信模态框
      messageModalTitle: "", // 发送站内信标题
      messageFormValidate: {
        //   title: [
        //     regular.REQUIRED,
        //     regular.VARCHAR20
        //   ],
        name: [regular.REQUIRED, regular.VARCHAR255],
      },
      //消息发送表单
      messageSendForm: {
        name: "",
        stauts:'',
        url:''
      },
      submitLoading: false, // 添加或编辑提交状态
      noticeColumns: [
        {
          title: "名称",
          key: "name",
          minWidth: 300,
          sortable: false,
        },
        {
          title: "图标",
          key: "url",
          minWidth: 300,
          slot: "iconSlot",
        },
        {
          title: "状态",
          key: "status",
          maxWidth: 100,
          // sortType: "desc",
          render: (h, params) => {
            if (params.row.status == "0") {
              return h("Badge", { props: { status: "success", text: "开启" } });
            } else if (params.row.status == "1") {
              return h("Badge", {
                props: { status: "processing", text: "禁用" },
              });
            }
          },
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          fixed: "right",
          width: 140,
          render: (h, params) => {
            let enableOrDisable = "";
            if (params.row.status == "0") {
              enableOrDisable = h(
                "Button",
                {
                  props: {
                    size: "small",
                  },
                  style: {
                    marginRight: "5px",
                  },
                  on: {
                    click: () => {
                      this.disable(params.row);
                    },
                  },
                },
                "关闭"
              );
            } else {
              enableOrDisable = h(
                "Button",
                {
                  props: {
                    type: "success",
                    size: "small",
                  },
                  style: {
                    marginRight: "5px",
                  },
                  on: {
                    click: () => {
                      this.enable(params.row);
                    },
                  },
                },
                "开启"
              );
            }
            return h("div", [
              enableOrDisable,
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                  },
                  style: {
                    marginRight: "5px",
                  },
                  on: {
                    click: () => {
                      this.edit(params.row);
                    },
                  },
                },
                "编辑"
              ),
            ]);
          },
        },
      ],
      noticeData: [], // 表单数据
    };
  },
  created() {
    this.getNoticeMessage();
  },
  methods: {
    // 初始化数据
    init() {
      this.accessToken = {
        accessToken: this.getStore("accessToken"),
      };
    },
    
    // 上传成功
    handleSuccess(res, file) {
      console.log(res)
      this.messageSendForm.url=res.result
      console.log(file)
    },
    // 获取滚动消息列表
    getNoticeMessage() {
      this.loading = true;
      API_Setting.homepage().then((res) => {
        this.loading = false;
        console.log(res);
        if (res.success) {
          this.noticeData = res.result;
        }
      });
      this.loading = false;
    },
    //管理员发送消息提交
    sendMessageSubmit() {
      this.$refs.messageSendForm.validate((valid) => {
        if (valid) {
          if (this.editid != "") {
            console.log(1)
            let parse = {
              status: this.messageSendForm.status,
              name: this.messageSendForm.name,
              url:this.messageSendForm.url
            };
            API_Setting.homepageStatusEdit(this.editid, parse).then((res) => {
              this.loading = false;
              if (res.success) {
                this.$refs.messageSendForm.resetFields();
                this.$Message.success("编辑成功");
                this.editid = "";
                this.messageModalVisible = false;
                this.getNoticeMessage();
              }
            });
          } else {
            console.log(2)
            API_Setting.getaddmessage(this.messageSendForm).then((res) => {
              this.loading = false;
              if (res.success) {
                this.$refs.messageSendForm.resetFields();
                this.$Message.success("发送成功");
                this.messageModalVisible = false;
                this.getNoticeMessage();
              }
            });
          }
        } else {
          this.$Message.error("必填项不能为空!");
          return false;
        }
      });
    },
    // 编辑消息
    edit(v) {
      API_Setting.homepageStatusForm(v.id).then((res) => {
        if (res.success) {
          this.editid = v.id;
          this.messageModalTitle = "编辑";
          this.messageModalVisible = true;
          this.messageSendForm = res.result;
          this.messageSendForm.status = res.result.status.toString();
        }
      });
    },
    //禁用消息
    disable(v) {
      let parse = {
        status: "1",
      };
      API_Setting.homepageStatus(v.id, parse).then((res) => {
        if (res.success) {
          this.$Message.success("关闭成功");
          this.getNoticeMessage();
        }
      });
    },
    //启用消息
    enable(v) {
      let parse = {
        status: "0",
      };
      API_Setting.homepageStatus(v.id, parse).then((res) => {
        if (res.success) {
          this.$Message.success("启用成功");
          this.getNoticeMessage();
        }
      });
    },
    //发送对象选择
    selectObject(v) {
      this.messageSendForm.messageRange = "ALL";
    },
  },
  mounted() {
    this.init();
  },
};
</script>
<style lang="scss">
@import "../../sys/message/sms.scss";
.iconImg{
  width:80px;
  height:80px;
  display:block;
  margin-top: 20px;
  border-radius: 6px;
}
</style>
